<template>
  <div class="login">
    <input type="text" v-model="username" />
    <input type="text" v-model="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
import apiConf from "@/api/apiConf"

export default {
  data() {
    return {
      username: "admin",
      password: "admin",
    };
  },
  methods: {
    async login() {
      console.log(this.username, this.password);
      const conf = apiConf.user.login(this.username, this.password)
      try {
          const data = await this.$axios(conf)
            let token = data.data.data.token
            console.log(token)
            this.$store.state.token = token
            localStorage.setItem('token', token)
            this.$router.push('/msg')
      } catch (error) {
          console.log(error)
      }
      
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  button,
  input {
    margin: 15px 0;
    padding: 10px;
    box-sizing: border-box;
    width: 25vw;
    font-size: 14px;
    max-width: 335px;
    min-width: 200px;
    border-radius: 5px;
  }
  input:focus {
    border: 1px solid #1890ff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
  }
  button {
    font-size: 15px;
    color: #ffffff;
    background-color: #419cf1;
  }

  button:hover {
    cursor: pointer;
    background: #0285ff;
    border-color: #0285ff;
    color: #ffffff;
  }
}
</style>